<!--index--> 
<template>
    <div class="main">
        <section>
            <!--Lunbo--> 
            <Lunbo></Lunbo>
            <!--Playing--> 
            <Playing></Playing>
            <!--Coming--> 
            <Coming></Coming>
        </section>
        <section class="m-mark" v-if="isMark">
            <div>
                <img src="../../assets/images/loading.gif" />
                <span>正在加载中，请稍后...</span>
            </div>
        </section>
    </div>
</template>

<script>
    import Lunbo from './Banner.vue';
    import Playing from './Playing.vue';
    import Coming from './Coming.vue';
    export default {
        data: function() {
            return {
                isMark: true
            }
        },
        components: {
            Lunbo,
            Playing,
            Coming
        }
    }
</script>




<style>
    .m-mark {
        position: fixed;
        top: 50px;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 999;
        background-color: #ebebeb;
    }

    .m-mark div {
        width: 75px;
        height: 75px;
        text-align: center;
        color: #fff;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -35px;
        margin-top: -75px;
    }
    .m-mark div img{
        width: 100%;
        
    }
    .m-mark div span{
        display: inline-block;
        color : #ccc;
        white-space: nowrap;
        margin-left: -50%;
    }
</style>